import React from 'react';
import axios from 'axios'
export default class Classification extends React.Component{
    constructor(props){
        super(props)
        this.state={
            categoryList:[]
        }
    }
    componentDidMount(){
        console.log(this.props);
        this.setState({
            categoryList:this.props.categoryList
        })
    }
    render(){
        const {categoryList} = this.state
        return(
            <div className="classification">
                <div className="sub-list">
                    <h3>全部分类</h3>
                    <ul>
                        {
                            categoryList&&categoryList.children.map((A,index)=>{
                                return(
                                    <li key={index}>
                                        <img src={A.picture} alt="" />
                                        <p>{A.name}</p>
                                    </li>
                                )
                            })
                        }
                        
                    </ul>
                </div>
                {
                    categoryList&&categoryList.children.map((B,index)=>{
                        return(
                            <div className="ref-goods" key={index}>
                                <div className="head">
                                    <h3>- {B.name} -</h3>
                                    <p>温暖柔软，品质之选</p>
                                    <span className='spans'>
                                        <span>查看全部 》</span>
                                    </span>
                                </div>
                                <div className="body">
                                    {
                                        B&&B.goods.map((C,index)=>{
                                            return (
                                                <span key={index}>
                                                    <p>{C.name}</p>
                                                    <p>{C.desc}</p>
                                                    <p>￥{C.price}</p>
                                                </span>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    })
                }
               
        </div>
        )
    }
}